<template>
      <div class="tree-item">
        <div class="tree-item-left">
          <table-checkbox :value="current.key" :checked="current.checked" @on-click="onClick" :key="current.key">{{ current.name }}</table-checkbox>
        </div>
        <div class="tree-item-right">
          <span v-if="!isList">
            <label v-for="c in current.list" :key="c.key">
              <table-checkbox :value="c.key" :checked="c.checked" @on-click="onClick">{{ c.name }}</table-checkbox>
            </label>
          </span>
          <table-item v-else v-for="c in current.list" :item="c" :keys="keys" :key="c.key" @on-click="onClick"></table-item>
        </div>
        <div class="tree-item-clear"></div>
      </div>
</template>
<script>
  import TableCheckbox from "./TableCheckBox";

  export default {
    name: 'table-item',
    components: { TableCheckbox },
    props: {
      item: {
        type: Object,
        default: function () {
          return {}
        }
      },
      keys: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    computed: {
      isList() {
        for (let item of this.item.list) {
          if (item.list && item.list.length > 0) {
            return true
          }
        }
        return false;
      },
      current() {
        const keys = new Set([...this.keys]);
        this.item.checked = keys.has(this.item.key);
        for (let c of this.item.list) {
          c.checked = keys.has(c.key);
        }
        return this.item;
      },
    },
    methods: {
      onClick(state, value) {
        this.$emit('on-click', state, value);
      }
    },
  }
</script>

<style scoped>
  .tree-item{line-height: 50px; border-bottom: 1px solid #e5e5e5;}
  .tree-item-left{float: left; width: 200px;}
  .tree-item-right{float: right; width: calc(100% - 200px);border-left: 1px solid #e5e5e5;}
  .tree-item-right .tree-item:last-child{border-bottom: 0;}
  .tree-item label{margin-left: 10px; padding: 0; height: 30px; line-height: 30px;}
  .tree-item-clear{clear: both; margin: 0; padding: 0; height: 0;}
</style>
